<template>
  <div class="thermometer-container">
    <div class="thermometer">
      <div class="scale">
        <div class="mark" v-for="temp in [100, 80, 60, 40, 20, 0]" :key="temp">
          <span class="degree">{{ temp }} °C</span>
        </div>
      </div>
      <div class="tube-container">
        <div class="tube">
          <div class="mercury" :style="{ height: `${mercuryHeight}%` }"></div>
        </div>
        <div class="bulb"></div>
      </div>
      <div class="current-temp" :style="{ top: `${100 - mercuryHeight}%` }">
        {{ temperature }}°C
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

defineOptions({
  name: "Thermometer",
});

const props = defineProps({
  temperature: {
    type: Number,
    default: 78,
  },
  minTemp: {
    type: Number,
    default: 0,
  },
  maxTemp: {
    type: Number,
    default: 100,
  },
});

const mercuryHeight = computed(() => {
  const percentage =
    ((props.temperature - props.minTemp) / (props.maxTemp - props.minTemp)) *
    100;
  return Math.min(Math.max(percentage, 0), 100);
});
</script>

<style scoped lang="scss">
.thermometer-container {
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.thermometer {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 80%;
  margin-right: 5px;
}

.mark {
  display: flex;
  align-items: center;
}

.degree {
  font-size: 12px;
  white-space: nowrap;
}

.tube-container {
  position: relative;
  height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tube {
  width: 12px;
  height: 100%;
  background: rgba(30, 144, 255, 0.3);
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  position: relative;
}

.mercury {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: linear-gradient(to top, #00ff00, #ffff00, #ff8000, #ff0000);
  border-radius: 6px 6px 0 0;
  transition: height 0.5s ease;
}

.bulb {
  width: 25px;
  height: 25px;
  background: #00ff00;
  border-radius: 50%;
  margin-top: -6px;
  box-shadow: 0 0 8px rgba(0, 255, 0, 0.7);
}

.current-temp {
  position: absolute;
  right: -35px;
  font-size: 14px;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}
</style>
